<template>
  <div>
    <div class="border-b-[1px] border-[#e8e8e8] pb-4 text-[18px] font-bold">
      通知方式配置
    </div>
    <div class="item">
      <div class="title">
        <span class="first-title">警报配置</span>
        <img src="/static/alarm/alarm.png" />
      </div>
      <Row class="flex justify-between">
        <Col :span="20" class="flex items-center">
          <Form :model="audioForm" ref="audioFormRef" class="flex items-center">
            <audio ref="audioRef" :src="audioForm.audioUrl" loop></audio>
            <div>上传音频:</div>
            <div class="ml-2 flex items-center">
              <Button @click="inputClick">
                <div class="flex items-center justify-center">
                  <UploadOutlined /> 上传
                </div>
              </Button>
              <span style="margin-left: 10px">{{ audioForm['audioUrl'] }}</span>
              <img
                :src="isPlay ? notice : pause"
                class="ml-2 h-[16px] w-[16px] cursor-pointer"
                @click="onPlay"
              />
            </div>
            <FormItem name="audioUrl">
              <input
                type="file"
                ref="fileUpload"
                accept="audio/*"
                style="display: none"
                @change="uploadAudioUrl"
              />
            </FormItem>
          </Form>
        </Col>
        <Col :span="3">
          <Button @click="onSave" type="primary">保存配置</Button>
        </Col>
      </Row>
    </div>
    <div class="item">
      <div class="title">
        <span class="first-title">短信配置</span>
        <img src="/static/alarm/message.png" />
      </div>
      <Row class="flex justify-between">
        <Col :span="20">
          <BoForm ref="formRef" :model="msgForm" :columns="columnsMsg">
          </BoForm>
        </Col>
        <Col :span="3">
          <Button @click="onSave" type="primary">保存配置</Button>
        </Col>
      </Row>
    </div>
    <div class="item">
      <div class="title">
        <span class="first-title">钉钉配置</span>
        <img src="/static/alarm/dingding.png" />
      </div>
      <Row class="flex justify-between">
        <Col :span="20">
          <BoForm ref="formRef" :model="dingForm" :columns="columnsDing">
          </BoForm>
        </Col>
        <Col :span="3">
          <Button @click="onSave" type="primary">保存配置</Button>
        </Col>
      </Row>
    </div>
    <div class="item">
      <div class="title">
        <span class="first-title">企业微信配置</span>
        <img src="/static/alarm/wechat.png" />
      </div>
      <Row class="flex justify-between">
        <Col :span="20">
          <BoForm ref="formRef" :model="wechatForm" :columns="columnsWechat">
          </BoForm>
          <!-- <BoForm ref="formRef" :model="wechatForm" :columns="columnsNo">
          </BoForm> -->
        </Col>
        <Col :span="3">
          <Button @click="onSave" type="primary">保存配置</Button>
        </Col>
      </Row>
    </div>
  </div>
</template>
<route lang="json">
{
  "name": "push-config",
  "meta": {
    "title": "通知方式配置"
  }
}
</route>
<script setup lang="tsx">
import { reactive, ref } from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { BoForm } from '@boeyo/ui';
import { Button, Col, Form, FormItem, Row, message } from 'ant-design-vue';
import { uploadImage } from './api';
import { saveConfig } from './api';
import notice from '/static/audio/notice.png';
import pause from '/static/audio/pause.png';

//--------------音频---------------
const audioFormRef = ref();
const audioForm = reactive({
  audioUrl: '/static/audio/didi.mp3',
});

// 上传音频
const fileUpload = ref();
const inputClick = () => {
  fileUpload.value?.click();
};
const uploadAudioUrl = async (e: any) => {
  const file = e.target.files[0];
  const formData = new FormData();
  formData.append('file', file, file.name);
  formData.append('fileName', file.name);
  await uploadImage(formData);
  message.success('上传成功');
};
// 播放音频
const isPlay = ref(false);
const audioRef = ref();
const onPlay = () => {
  isPlay.value ? audioRef?.value?.pause() : audioRef?.value?.play();
  isPlay.value = !isPlay.value;
};

// 保存音频配置
const onSave = async () => {
  await audioFormRef.value.validate();
  await saveConfig(audioForm);
};

//--------------短信---------------
const msgForm = reactive({
  address: '',
});

const columnsMsg = [
  {
    title: '平台地址',
    dataIndex: 'address',
    valueType: 'input',
    formItemProps: {
      rules: [{ required: true, message: '请输入平台地址' }],
    },
    colProps: {
      span: 8,
    },
  },
  {
    title: 'API Key',
    dataIndex: 'key',
    valueType: 'input',
    formItemProps: {
      rules: [{ required: true, message: '请输入API Key' }],
    },
    colProps: {
      span: 8,
    },
  },
  {
    title: 'Secret',
    dataIndex: 'secret',
    valueType: 'input',
    formItemProps: {
      rules: [{ required: true, message: '请输入Secret' }],
    },
    colProps: {
      span: 8,
    },
  },
];
//--------------钉钉---------------
const dingForm = reactive({
  address: '',
});

const columnsDing = [
  {
    title: 'WebHook（钉钉群机器人）：',
    dataIndex: 'ding',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入钉钉群机器人地址',
        },
      ],
    },
    colProps: {
      span: 14,
    },
    formProps: {
      placeholder: 'https://oapi.dingtalk.com/robot/send?accesstoken=xxx',
    },
  },
];
//--------------企业微信---------------
const wechatForm = reactive({
  address: '',
});
const columnsWechat = [
  {
    title: 'WebHook（企微群机器人）：',
    dataIndex: 'ding',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入钉钉群机器人地址',
        },
      ],
    },
    colProps: {
      span: 14,
    },
    formProps: {
      placeholder: 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxx',
    },
  },
];

// const columnsNo = [
//   {
//     title: '指定企业微信(Group)：',
//     dataIndex: 'groupId',
//     valueType: 'input',
//     formItemProps: {
//       rules: [
//         {
//           required: true,
//           message: '请输入groupId',
//         },
//       ],
//     },
//     colProps: {
//       span: 8,
//     },
//     formProps: {
//       placeholder: '请输入groupId',
//     },
//   },
//   {
//     title: '指定企业微信(Secret)：',
//     dataIndex: 'secret',
//     valueType: 'input',
//     formItemProps: {
//       rules: [
//         {
//           required: true,
//           message: '请输入Secret',
//         },
//       ],
//     },
//     colProps: {
//       span: 8,
//     },
//     formProps: {
//       placeholder: '请输入Secret',
//     },
//   },
// ];
</script>

<style lang="scss" scoped>
.item {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 12px;
  .title {
    margin: 16px 0;
    display: flex;
    align-items: center;
    .first-title {
      font-size: 16px;
    }
    img {
      margin-left: 8px;
      height: 16px;
      width: 16px;
    }
  }
}
</style>
